<template>
  <div>
    <div class="app">
      <!-- 头部 -->
      <div class="header">
        <div class="logo">
          <span class="spanimg" @click="Jump_home"></span
          ><span class="longspan">更新</span>
        </div>
      </div>
      <!-- 日期 -->
      <div class="data_choose">
        
        <ul>
          <li
            v-for="item in update"
            :key="item.comicUpdateDate_week"
            :class="{ cur: item.comicUpdateDate_week == curindex }"
            @click="setcurindex(item)"
          >
            {{ item.comicUpdateDate }}
          </li>
        </ul>
      </div>
      <!-- 漫画列表 -->
      <div class="zp-list2">
        <div class="zp-list2-li" v-for="item in datainfo" :key="item.comic_id"  @click="Jump_pre(item.comic_id,item.comic_name)">
          <div class="zp-list2-li1">
            <img :src="item.imgurl" alt="" />
          </div>
          <div class="zp-list2-li2">
            <p>{{ item.comic_name }}</p>
            <div class="zp-list2-li2-s zp-list2-li2-1">
              {{ item.author_name }}
            </div>
            <div class="zp-list2-li2-s zp-list2-li2-2">
              <span v-for="ele in item.comic_type" :key="ele"
                >{{ ele }}&nbsp;</span
              >
            </div>
            <div class="zp-list2-li2-s zp-list2-li2-3">{{item.renqi| playCountNum}}</div>
          </div>
        </div>
      </div>
      <!-- 底部加载更多 -->
      <div class="beforeDay" @click="setload">点击加载更多</div>
    </div>
  </div>
</template>
<script>
// import {getCaptchaSent,getLoginCellphone} from "../api/login.js"
// import {getUpData} from "../api/UpData";
export default {
  data() {
    return {
     
      update: "",
      curindex: 1,
      datainfo: "",
    };
  },
  created() {
    this.getUpDataFun();
  },
  methods: {
    Jump_home() {
        this.$router.go(-1)
    },
      Jump_pre(id,name){
            this.$emit('getid',id)
          this.$router.push({name:'pre'})
          this.$emit('getcomicname',name)
        },

  
    setcurindex(item) {
      console.log(item);
      this.curindex = item.comicUpdateDate_week;
      this.datainfo = this.update[this.curindex].info;
    },
    getUpDataFun() {
      this.$axios({
        url: "https://www.kanman.com/api/updatelist",
        method: "get",
      }).then((data) => {
        console.log(data.data.data.update[5].info[1].update_time);
        this.update = data.data.data.update;
        //  this.curindex=data.data.data.update[6].info[0].update_time
     this.datainfo = data.data.data.update[this.curindex].info;
        this.datainfo.forEach((item) => {
          this.$set(
            item,
            "imgurl",
            `https://image.yqmh.com/mh/${item.comic_id}.jpg`
          );
        });
       
      });
    },
    setload(){
      if(this.curindex==0){
        // this.$toast("没有更多了");
        this.curindex=6
        return
      }
      this.curindex-=1
    }
  },
  watch:{
    curindex(){
this.getUpDataFun()
    }
  },
      filters:{
        playCountNum(value){ //134567897
            let w = value > 10000?value/10000:value;//万计算
            let y = w > 10000? parseInt(w/10000) +"亿" :parseInt(w) +"万";//亿计算

            return y;
        }
    }
};
</script>
<style scoped>
.app {
  background-color: rgb(242, 242, 242);
}

/* 头部 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 53px;
  background-color: #fff;
  padding: 13px 13px 0 13px;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #b3b3b3;
  z-index: 999;
}
.logo {
  width: 100px;
  height: 26.5px;
  margin-right: 110px;
  line-height: 26.5px;
}
.spanimg {
  display: inline-block;
  width: 18px;
  height: 30px;
  background: url(../../public/assets/images-index/zjt.png) no-repeat;
  background-size: 70% 70%;
}
.longspan {
  font-size: 18px;
  display: inline-block;
  color: #333;
  margin-left: 12px;
  font-weight: 800;
  position: relative;
  top: -13px;
}

/* 日期模块 */
.data_choose {
  position: fixed;
  width: 100%;
  height: 45px;
  top: 53px;
  left: 0;
  background-color: rgb(255, 255, 255);
  z-index: 99;
}
.data_choose ul {
  height: 45px;
  display: flex;
}
.data_choose ul li {
  text-align: center;
  font-size: 14px;
  color: #999;
  flex: 1;
  margin-top: 7.5px;
  height: 30px;
  line-height: 30px;
}
.cur {
  background: #dcf0e8;
  border-radius: 20px;
  color: #1ddd8f !important;
}
/* 列表模块 */
.zp-list2 {
  margin-top: 93px;
}
.zp-list2-li {
  box-sizing: border-box;
  padding: 5px 8px 8px 8px;
  display: flex;
  background-color: #fff;
  width: 100%;
  height: 115px;
  border-top: 5px solid #f2f2f2;
}
.zp-list2-li1 {
  width: 22%;
  height: 100%;
}
.zp-list2-li1 img {
  width: 100%;
  height: 100%;
}
.zp-list2-li2 {
  padding: 5px 8px 8px 8px;
}
.zp-list2-li2 p,
.zp-list2-li2 div {
  width: 100%;
  height: 23px;
}
.zp-list2-li2 p {
  color: #333;
  font-size: 18px;
}
.zp-list2-li2 > div {
  height: 25px;
  line-height: 25px;
  color: #999;
  font-size: 12px;
  margin-left: 10px;
}
.zp-list2-li2-s {
  position: relative;
}
.zp-list2-li2-s::after {
  position: absolute;
  content: "";
  display: block;
  width: 11px;
  height: 12px;
  top: 6px;
  left: -12px;
  background-image: url(../../public/assets/images-index/sprite3.png);
  background-size: 52px 12px;
}
.zp-list2-li2-2::after {
  background-position: -18px 0px;
}
.zp-list2-li2-3::after {
  background-position: 12px 0px;
}
/* 底部加载更多 */
.beforeDay {
  width: 100%;
  height: 50px;
  background-color: rgb(29, 221, 143);
  color: #fff;
  line-height: 50px;
  text-align: center;
}
</style>